<template>
    <div class="clearfix">
        <section class="content-header clearfix">
            安全管理&nbsp;/&nbsp;安全隐患排查&nbsp;/&nbsp;审核
        </section>
        <div class="col-md-12 clearfix" style="margin-top:50px;">
            <form class="form-horizontal">
                <div class="clearfix">
                    <div class="col-md-6">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">排查时间：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.time}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">检查项目：</label>
                                <div class="col-sm-8">
                                    <!-- <p>{{list.safeCheckcontent}}</p> -->
                                    <p>{{infoList.safeCheck}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">系统：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.systemName}}</p>
                                </div>
                            </div>
                            <div class="form-group" v-if="infoList.safeArea!=null">
                                <label class="col-sm-4 control-label">片区：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.safeArea}}</p>
                                </div>
                            </div>
                            <div class="form-group" v-if="infoList.safeSite!=null">
                                <label class="col-sm-4 control-label">点位：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.safeSite}}</p>
                                </div>
                            </div>
                            <div class="form-group" v-if="infoList.project!=null">
                                <label class="col-sm-4 control-label">工程名称：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.project}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">责任部门：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.deptName}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">部门责任人：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.safePersonName}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">安全员：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.safeDealName}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">处理时限：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.timelimit}}天</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">反映内容：</label>
                                <div class="col-sm-8">
                                    <p>{{infoList.reactcontent}}</p>
                                    <img v-for="item in infoList.photopathList" :key="item.value" :src="item" alt="" @click="clickImg($event)">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="clearfix" style="margin-bottom:50px;" v-for="item in changedList" :key="item.value">
                            <div class="box-body" v-if="item.changeTime!=null">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">整改时间：</label>
                                    <div class="col-sm-8">
                                        <p>{{item.changeTime}}</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8 line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">处理人：</label>
                                    <div class="col-sm-8 person">
                                        <p>{{item.personName}}</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8 line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">反映内容：</label>
                                    <div class="col-sm-8">
                                        <p>{{item.changedcontent}}</p>
                                        <img v-for="img in item.changePhotopathList" :key="img.value" :src="img" alt="" @click="clickImg($event)">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8 line">
                                    </div>
                                </div>
                            </div>
                            <div class="box-body" v-if="item.audingTime!=null">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">审核结果：</label>
                                    <div class="col-sm-8">
                                        <p v-if="item.result==1">审核通过</p>
                                        <p v-if="item.result==0">审核不通过</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8 line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">反映内容：</label>
                                    <div class="col-sm-8">
                                        <p>{{auditing.remark}}</p>
                                        <img v-for="item in auditing.photopathList" :key="item.value" :src="item" alt="" @click="clickImg($event)">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8 line">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 clearfix">
                    <div class="col-md-4"></div>
                    <div class="col-md-2" style="text-align: center">
                        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" style="margin-right:50px" v-if="$route.query.status==1">审核</button>
                        <router-link to="trouble">
                            <button type="button" class="btn btn-info">返回</button>
                        </router-link>
                    </div>
                    <div class="col-md-6"></div>
                </div>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">审核</h4>
                            </div>
                            <div class="modal-body clearfix">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        <i class="colorRed">*</i>审核结果：</label>
                                    <div class="col-sm-9">
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="1" checked="checked" v-model="picked">
                                        <span>通过</span>
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="0" style="margin-left:50px" v-model="picked">
                                        <span>不通过</span>
                                    </div>
                                </div>
                                <div class="form-group clearfix">
                                    <label class="col-sm-3 control-label">备注：</label>
                                    <div class="col-sm-9 clearfix">
                                        <textarea class="form-control" rows="3" placeholder="请输入事件描述" maxlength="80" v-model="addAuding.remark"></textarea>
                                    </div>
                                </div>
                                <div class="form-group" style="margin-top:65px;">
                                    <label class="col-sm-3 control-label">上传照片：</label>
                                    <div class="col-sm-9" :class="{hiddenIcon: fileList.length>2}">
                                        <el-upload class="upload-demo" :action="uploadUrl" :on-success='handleSuccess' :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                        </el-upload>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-block btn-info" data-dismiss="modal" @click="shenhe">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc" />

    </div>
</template>

<script>
import utils from "@/utils/index"
import { getItemName } from "@/filters/index.js";
import bigImg from "@/components/common/bigImg.vue";

export default {
    data() {
        return {
            nowTime: utils.getDate(),
            infoList: {},
            changedList: [],
            auditing: {},
            home: {
                itemsList: [],
                selAreaList: [],
                selSiteList: [],
                deptList: [],
                personList: [],
                limitesList: []
            },
            changed: {},
            uploadUrl: `${window.apiPrefix}api/safe/uploadFile`,
            fileList: [],
            dialogImageUrl: "",
            dialogVisible: false,
            addAuding: {
                photopath: [],
                remark: '',
            },
            picked: "1",
            showImg: false,
            imgSrc: ''
        }
    },
    components:{
        bigImg
    },
    watch: {
        fileList() {
            console.log(this.fileList);
            this.addAuding.photopath = "";
            this.fileList.forEach(item => {
                this.addAuding.photopath += `${item.response.data},`;
            });
            this.addAuding.photopath = this.addAuding.photopath.substr(
                0,
                this.addAuding.photopath.length - 1
            );
        }
    },
    mounted() {

        this.selSafeIdList(() => {
            this.getItems()
            this.getSelArea()
            this.getselSite()
            this.getDept()
            this.getPerson()
            this.getLimites()
        })
    },
    methods: {
        getItemName,
        handleRemove(file, fileList) {
            this.fileList = fileList;
            console.log(file, fileList);
        },
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        //检查项目列表
        getItems() {
            this.$api.safe.items().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.itemsList = res.data
                }
            });
        },
        //片区列表
        getSelArea() {
            this.$api.safe.selArea().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.selAreaList = res.data
                }
            });
        },
        //点位列表
        getselSite() {
            this.$api.safe.selSite({
                areaId: this.infoList.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.selSiteList = res.data
                }
            });
        },
        //部门列表
        getDept() {
            this.$api.safe.selDept({
                areaId: this.infoList.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.deptList = res.data
                }
            });
        },
        //责任人列表
        getPerson() {
            this.$api.safe.selPerson({
                areaId: this.infoList.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.personList = res.data
                }
            });
        },
        //处理时限列表
        getLimites() {
            this.$api.safe.limites().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.home.limitesList = res.data
                }
            });
        },
        //根据id获取隐患列表
        selSafeIdList(callback) {
            this.$api.safe.selSafeId({
                safeId: this.$route.query.safeId
            }).then(res => {
                if (res.success) {
                    console.log(res);
                    this.infoList = res.data.safeInfo
                    this.changed = res.data.safeChanged
                    this.auditing = res.data.safeAuditing
                    this.changedList = res.data.list
                    callback()
                }
            });
        },
        //审核处理结果
        shenhe() {

            this.addAuding.photopath = '';
            this.fileList.forEach(item => {
                this.addAuding.photopath += `${item.response.data},`;
            });
            this.addAuding.photopath = this.addAuding.photopath.substr(
                0,
                this.addAuding.photopath.length - 1
            );

            this.$api.safe.addAuding({
                safeId: this.$route.query.safeId,
                changedId: this.changed.changedId,
                photopath: this.addAuding.photopath,
                remark: this.addAuding.remark,
                result: this.picked
            }).then(res => {
                if (res.success) {
                    console.log(res);
                    this.$$message({
                        message: "恭喜您，审核成功！",
                        type: "success"
                    });
                    this.$router.push({ path: "trouble" });
                }
            });
        },
        //放大图片
        viewImg() {
            this.showImg = false;
        },
        clickImg(e) {
            this.showImg = true;
            // 获取当前图片地址
            this.imgSrc = e.currentTarget.src;
        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
p {
  padding: 0px;
  margin: 0px !important;
  line-height: 34px;
  height: 34px;
}
img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  cursor: pointer;
}
.modal-body {
  .control-label {
    padding-top: 0px;
  }
  .form-group {
    line-height: 34px;
    height: 34px;
  }
}
.line {
  height: 0;
  border-top: 1px solid #b2afb3;
  margin-top: -15px;
}
</style>
<style>
input[type="file"] {
  display: none;
}
</style>

